<template>
	<view class="u-p-t-40 u-p-r-60 u-p-b-30 u-p-l-60 logincontainer">
		<!-- <u-avatar size="140" src="/static/user.png" mode="square"></u-avatar> -->
		<button class="avatarwrap" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<u-form :model="loginModel" ref="form1" class="forms">
			<u-form-item prop="userPhone" left-icon="phone" label-width="auto" label="电话号码">
				<u-input placeholder="请输入你的电话" v-model="loginModel.userPhone" />
			</u-form-item>
			<u-form-item prop="userName" left-icon="account-fill" label-width="auto" label="用户名">
				<u-input placeholder="请输入用户名" v-model="loginModel.userName" />
			</u-form-item>
			<u-form-item prop="studentId" left-icon="account-fill" label-width="auto" label="学号">
				<u-input placeholder="请输入学号" v-model="loginModel.studentId" />
			</u-form-item>
			<u-form-item prop="userPassword" left-icon="lock" label-width="auto" label="密码">
				<u-input placeholder="请输入密码" v-model="loginModel.userPassword" />
			</u-form-item>
			<u-form-item prop="commit" left-icon="lock" label-width="auto" label="确认密码">
				<u-input placeholder="请再次输入密码" v-model="loginModel.confirm" />
			</u-form-item>
			<view class="passtext" @click="toLogin">
				已有帐号,去登陆
			</view>

			<u-button @click="commit" :custom-style="customStyle1"  >注册</u-button>


		</u-form>



	</view>


</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onReady
	} from '@dcloudio/uni-app'
	
	//表单ref属性
	const form1 = ref()
	import {
		registerApi
	} from '../../api/user.js'
	const loginModel = reactive({
		userPhone: '',
		userName: '',
		studentId:'',
		userPassword: '',	
		confirm: ""
	})
	const customStyle1 = reactive({
		marginTop: '20px',
		background: '#FF7670',
		color: '#FFF',
		width: '100%'
	})
	const customStyle2 = reactive({
		marginTop: '20px',
		background: '#FF7670',
		color: '#FFF',
		width: '100%'
	})
	const onChooseAvatar = (e) => {

	}

	//去登录
	const toLogin = () => {
		uni.navigateTo({
			url: '../login/login'
		})
	}

	//表单验证规则
	const rules = reactive({
		userPhone: [{
			required: true,
			message: '请输入电话',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		}],
		userName: [{
			required: true,
			message: '请输入账号',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		}],
		studentId: [{
			required: true,
			message: '请输入学号',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		}],
		userPassword: [{
			required: true,
			message: '请输入密码',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		}],
		confirm: [{
			required: true,
			message: '请输入确定密码',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		}],
	})
	//注册提交
	const commit = () => {
		form1.value.validate(async (valid) => {
			if (valid) {
				if (loginModel.confirm != loginModel.userPassword) {
					uni.showToast({
						title: '密码和确定密码不一致',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				let res = await registerApi(loginModel)
				if (res && res.code == 200) {
					
					uni.navigateTo({
						url: '../login/login'
					})
				}
			}
		})
	}
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady(() => {
		form1.value.setRules(rules);
	})


	const avatarUrl = ref('/static/user.png')
</script>

<style lang="scss">
	.logincontainer {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 70px;
		flex-direction: column;

		.forms {
			width: 100%;
		}

		.passtext {
			display: flex;
			justify-content: flex-end;
			color: #FF7670;
			margin-top: 20px;
		}
	}

	.avatarwrap {
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70px;
		width: 70px;
		padding: 0;

		.avatar {
			width: 70px;
			height: 70px;
			padding: 0;
		}
	}
</style>